<template>
        <div>
          <div class="text-el" v-loading="loading">
            <h3 class="title-el">{{article.title}}<br/> <small>{{article.createDate | formatDate }}</small>&nbsp;&nbsp;<small>{{article.author}}</small></h3>
            <el-row><h3>&nbsp;</h3></el-row>
            <div class="txt-el" v-html="article.content">{{article.content}}</div>
          </div>
        </div>
</template>

<script>

    import {tool} from '../tool/index';
    export default {
      name: "content-detail",
      props:{
        article:Object,
        loading: Boolean
      },
      filters:{
          formatDate(val) {
              const value=new Date(val);
              const year=value.getFullYear();
              const month= tool.padDate(value.getMonth()+1);
              const day = tool.padDate(value.getDate());
              const hour = tool.padDate(value.getHours());
              const minutes = tool.padDate(value.getMinutes());
              const seconds = tool.padDate(value.getSeconds());
              return `${year}-${month}-${day}`;
          },
          fontSize(title){
              if(title.length>=50){
                  return `${title.slice(0, 45)}...`
              } else {
                  return title
              }
          },
      }
    }
</script>

<style lang="less" scoped>

  .text-el{
      min-height: 532px;
      border-radius: 5px;
      padding: 20px;
      h3{
          &.title-el{
              text-align: left;
              font-size: 22px;
              line-height: 32px;
          }
      }
  }


</style>
